<template>
    <div class="courseinfobox">
        <el-card class="box-card" style="width:100%;background-color:#f5f5f5;">
            <div slot="header" class="clearfix title-head">
                <div class="opt-title">填空题</div>
            </div>
            <el-row class="test-content">
                <el-col :span="20">
                    <div class="grid-content">
                        <span>1、中国的国家领导是人</span><input type="text" class="answer-content"><span>。</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content comment">
                        <span class="el-icon-video-play"></span> 点评                      
                    </div>
                </el-col>
            </el-row>
            <el-row class="test-content">
                <el-col :span="20">
                    <div class="grid-content">
                        <span>2、中国的国家领导是人</span><input type="text" class="answer-content"><span>。</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content comment">
                        <span class="el-icon-video-play"></span> 点评                      
                    </div>
                </el-col>
            </el-row>
            <el-row class="test-ans">
                <p style="color:#23794a">答案：A</p>
                <p style="color:#23794a">解析：哈哈哈哈哈哈</p>
            </el-row>
        </el-card>
        <el-card class="box-card" style="width:100%;background-color:#f5f5f5;">
            <div slot="header" class="clearfix title-head">
                <div class="opt-title">判断题</div>
            </div>
            <div v-for="o in 2" :key="o">
                <el-row class="test-content">
                    <el-col :span="20">
                        <div class="grid-content">
                            <span>{{o}}、曹县的国家领导是人奥巴马。</span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content comment">
                            <span class="el-icon-video-play"></span> 点评                      
                        </div>
                    </el-col>
                </el-row>
                <el-row class="test-answer">
                    <el-radio  v-model="radio1" label="正确">正确</el-radio><br>
                    <el-radio  v-model="radio1" label="错误">错误</el-radio>
                </el-row>
                <el-row class="test-ans">
                    <p style="color:#23794a">答案：A</p>
                    <p style="color:#23794a">解析：哈哈哈哈哈哈</p>
                </el-row>
            </div>
        </el-card>
        <el-card class="box-card" style="width:100%;background-color:#f5f5f5;">
            <div slot="header" class="clearfix title-head">
                <div class="opt-title">选择题</div>
            </div>
            <div v-for="(item,index) in 1" :key="index">
                <el-row class="test-content">
                    <el-col :span="20">
                        <div class="grid-content" style="height:100%;">
                            {{index+1}}、辅导费
                            <img style="width:30px;" src="http://47.112.137.215/uploads/file/image/20190602/1559477391299023538.png" title="1559477391299023538.png" alt="word.png"/>
                            <img style="width:40px;" class="kfformula" src="" data-latex="{55}^{\placeholder }_{\placeholder }"/>                          
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content comment">
                            <span class="el-icon-video-play"></span> 点评                      
                        </div>
                    </el-col>
                </el-row>
                <el-row class="test-opt">
                    <el-radio  v-model="radio1" label="1">A、1</el-radio><br>
                    <el-radio  v-model="radio1" label="2">B、2</el-radio><br>
                    <el-radio  v-model="radio1" label="3">C、3</el-radio><br>
                    <el-radio  v-model="radio1" label="4">D、4</el-radio>
                </el-row>
                <el-row class="test-ans">
                    <p style="color:#23794a">答案：A</p>
                    <p style="color:#23794a">解析：哈哈哈哈哈哈</p>
                </el-row>
            </div>
        </el-card>
        <el-card class="box-card" style="width:100%;background-color:#f5f5f5;">
            <div slot="header" class="clearfix title-head">
                <div class="opt-title">综合题</div>
            </div>
            <div v-for="o in 2" :key="o">
                <el-row class="test-content">
                    <el-col :span="20">
                        <div class="grid-content">
                            <span>{{o}}、证明1+1=2。</span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content comment">
                            <span class="el-icon-video-play"></span> 点评                      
                        </div>
                    </el-col>
                </el-row>
                <el-row class="test-opt1">
                    <textarea  id="" cols="30" rows="10"></textarea>
                </el-row>
                <el-row class="test-ans">
                    <p style="color:#23794a">答案：A</p>
                    <p style="color:#23794a">解析：哈哈哈哈哈哈</p>
                </el-row>
            </div>
        </el-card>
        <el-row class="subrow">
            <el-button class="submitbtn">提交</el-button>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "tests",
        data() {
            return {
                radio1:  true,

            }
        },
        methods: {
            
        },
    }
</script>

<style scoped>
.box-card{box-shadow: none!important;border-radius: none!important;}
.courseinfobox{padding: 20px}
.box-card{width: 100%}
.text {font-size: 14px;}
.clearfix:before,.clearfix:after {display: table;content: "";}
.clearfix:after {clear: both}
.box-card {width: 480px;}
.title-head{background-color: #fff;height: 60px;padding-left: 50px;padding-top: 20px;}
.opt-title{border-left:2px solid #24794b;padding-left: 10px;}
.test-content{background-color: #fff;margin-left: 50px;min-height: 60px;padding: 20px;margin-bottom: 10px;}
.test-answer{background-color: #fff;margin-left: 50px;min-height: 60px;padding: 10px;margin-bottom: 10px;padding-left: 60px;margin-top: -20px;}
.test-opt{background-color: #fff;margin-left: 50px;min-height: 60px;padding: 10px;margin-bottom: 10px;padding-left: 60px;margin-top: -20px;}
.test-opt1{background-color: #fff;margin-left: 50px;min-height: 60px;padding: 10px;margin-bottom: 10px;margin-top: -20px;}
.test-ans{padding:10px 80px;font-size: 14px;}
.answer-content{border:none;font-size: 14px;border-bottom: 1px solid #000;background-color: rgba(0, 0, 0，0);line-height: 20px;margin-top: -20px;}
.answer-content:focus {border: none;outline: none;line-height: 20px;border-bottom: 1px solid #000;margin-top: -20px;}
.comment{color: #24794b;}
.subrow{display: flex;justify-content: center;margin-top: 60px;}
.submitbtn{background-color: #24794b;color: #fff;width:160px;border-radius: 10px;}
textarea{border:none;width: 100%;text-indent: 2em;padding: 10px;}
textarea:focus{border:none;width: 100%;text-indent: 2em;padding: 10px;outline: none;}
</style>
